<template>
    <div class="hello">
        <header>
            <div class="main">
                <ul>
                    <li class="active"><button @click="gologin">返回登陆</button></li>
                    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
                    <li><a href="https://www.china.com" target="_blank">中华网</a></li>
                    <li><a href="https://www.csdn.net/" target="_blank"><span style="color: crimson;">C</span>SDN官网</a>
                    </li>
                </ul>
            </div>
            <div class="title">
                <h1><span style="color: crimson;">登陆成功！</span> 欢迎您的到来！</h1>
            </div>
        </header>
    </div>
</template>

<script>
export default {
    methods: {
        gologin() {
            this.$router.push('/Login');
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
    padding: 0;
    margin: 0;
    font-family: "楷体";
}

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?cs=srgb&dl=pexels-lisa-1083822.jpg&fm=jpg);
    height: 98vh;
    background-size: cover;
    background-position: center;
}

ul {
    float: right;
    list-style-type: none;
    margin: 15px;
}

ul li {
    display: inline-block;
}

ul li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid transparent;
    transition: .6s ease;
    border-radius: 20px;
}
ul li button {
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid transparent;
    transition: .6s ease;
    border-radius: 20px;
}

ul li a:hover {
    background-color: #fff;
    color: #000;
}

ul li.active button {
    background-color: #fff;
    color: #000;
}

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title h1 {
    color: #fff;
    font-size: 70px;
    font-family: Century Gothic;
}
</style>
